<template>
	<view>
		<view class="">
			<view class="u-popup-slot fujin1">
				<view class="mr32 ml32">
					<!-- 1 -->
					<view class="">
						<view class="">
							<view class="">
								<view class="flex flex-align">
									<view class="mr24"><image src="/static/img/addCc/Container.png" mode="" style="width: 120rpx;height: 120rpx;"></image></view>
									<view class="flex-column">
										<view class="flex ms4">
											<view class="mr4">兄弟群</view>
											<view class="">
												<!-- <image src="" mode=""></image> -->
												<u-icon name="edit-pen-fill"></u-icon>
											</view>
										</view>
										<view class="color_14 ">5人</view>
									</view>
									<view class="ml208">
										<view class="flex">
											<view class="mr22">
												<image src="/static/img/circleSet/baseline-favorite-24px.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
											</view>
											<view class=""><image src="/static/img/circleSet/baseline-share-24px.png" mode="" style="width: 48rpx;height: 48rpx;"></image></view>
										</view>
									</view>
								</view>
								<u-gap height="1" bgColor="rgba(20,20,20,0.1)"></u-gap>
							</view>
						</view>
					</view>

					<!-- 2 -->
					<view class=" ml8 ">
						<view class="">
							<view class="">
								<view class="">
									<view class="flex flex-wrap">
										<view class="item mr32 mt34" v-for="item in numberList" :key="item">
											<view class="flex-cen" style="flex-direction: column;">
												<view class="ms6">
													<image :src="item.uavatar || '/static/img/circleSet/ag.png'" mode="" style="width: 102rpx;height: 102rpx;"></image>
												</view>
												<view class="text-cen textover" style="width: 40px;white-space: nowrap;">{{ item.userNickName }}</view>
											</view>
										</view>
										<view class="item  mt34"><image src="/static/img/circleSet/54197.png" mode="" style="width: 102rpx;height: 102rpx;"></image></view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 3 -->
					<view class="mt50">
						<view class="">
							<view class="">
								<view class="">
									<view class="">
										<view class=""><u-input placeholder="本圈昵称" border="bottom" clearable></u-input></view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 4 -->
					<view class="">
						<view class="">
							<view class="">
								<view class="">
									<view class="">
										<view class="">
											<u-input placeholder="圈子码" border="bottom" clearable>
												<template slot="suffix">
													<view class="flex">
														<view class="color_FF mr286">AWX 05F</view>
														<u-button
															type="primary"
															text="复制"
															color="#9e61f6"
															customStyle="width: 126rpx;height: 46rpx;background: #9e61f6;border-radius: 30rpx 30rpx 30rpx 30rpx;opacity: 1;"
														></u-button>
													</view>
												</template>
											</u-input>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 5 -->
					<view class="">
						<view class="">
							<view class="">
								<view class="">
									<view class="">
										<view class="">
											<u-input placeholder="置顶聊天" border="bottom" clearable>
												<template slot="suffix">
													<view><u-switch v-model="value" @change="change" activeColor="#9e61f6"></u-switch></view>
												</template>
											</u-input>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 6 -->
					<view class="">
						<view class="">
							<view class="">
								<view class="">
									<view class="">
										<view class="">
											<u-input placeholder="消息免打扰" border="bottom" clearable>
												<template slot="suffix">
													<view><u-switch v-model="value1" @change="change" activeColor="#9e61f6"></u-switch></view>
												</template>
											</u-input>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 7 -->
					<view class="mt38">
						<view class="">
							<view class="">
								<u-subsection bgColor="#f1f1fe" activeColor="#FFFFFF" inactiveColor="#141414" :list="list" :current="1" mode="button"></u-subsection>
							</view>
						</view>
					</view>

					<!--  -->
					<u-gap height="20" bgColor="#fff"></u-gap>

					<!-- 8 -->
					<view class="ms20">
						<view class="">
							<view class="">
								<u-checkbox-group v-model="checked" placement="row">
									<u-checkbox activeColor="#9e61f6" inactiveColor="#9e61f6" label="仅邀请"></u-checkbox>
									<view class="mr66"></view>
									<u-checkbox activeColor="#9e61f6" inactiveColor="#9e61f6" label="可邀请、加入"></u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
					</view>

					<!-- 9 -->
					<view class="">
						<view class="">
							<view class="">
								<view class="u-demo-block">
									<view class="u-demo-block__content">
										<view class="u-page__checkbox-item">
											<u-checkbox-group
												v-model="checkboxValue2"
												placement="column"
												@change="checkboxChange"
												shape="square"
												inactiveColor="#9e61f6"
												activeColor="#9e61f6"
											>
												<u-checkbox
													:customStyle="{ marginBottom: '8px' }"
													v-for="(item, index) in checkboxList2"
													:key="index"
													:label="item.name"
													:name="item.name"
												></u-checkbox>
											</u-checkbox-group>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!--  -->
					<view class="mt34">
						<view class="flex-cen"><view @click="dissolveGroup" class="color_FF ms30">解散圈子</view></view>
					</view>
				</view>

				<!--  -->
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState, //先导入mapState方法
	mapMutations
} from 'vuex';
export default {
	data() {
		return {
			/*成员 */
			numberList: [],
			groupMessage: {},
			/* 下拉 */
			show: true,
			/* 混动 */
			value: true,
			value1: true,
			/* 分段 */
			list: ['未付款', '待评价', '已付款'],
			// 或者如下，也可以配置keyName参数修改对象键名
			// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
			current: 1,
			checkboxList2: [
				{
					name: '加入时需要圈主验证',
					disabled: false
				},
				{
					name: '加入时无需验证',
					disabled: false
				},
				{
					name: '直系亲属加入无需验证，仅限直系亲属',
					disabled: false
				}
			]
		};
	},
	computed: {
		...mapState('user', ['userInfo'])
	},
	onShow() {},
	onLoad(options) {
		console.log(options, 'options');
		this.groupMessage = JSON.parse(decodeURIComponent(options.data));

		this.getGroupNuber(this.groupMessage.ugroupId);
	},
	onUnload() {
		this.scoketClose();
		this.$socketIo.traderDetailIndex = 100; // 初始化 tabIndex
	},
	methods: {
		scoketClose() {
			this.$socketIo.connectNum = 1;
			const data = {
				cmd: 14,
				userId: this.userInfo.userId
			};
			this.$socketIo.send(data); // 这是给后端发送特定数据 关闭推送
			this.$socketIo.Close(); // 主动 关闭连接 ， 不会重连
		},
		getGroupHistory() {
			let userInfo = uni.getStorageSync('userInfo');
			// 要发送的数据包
			const data = {
				cmd: 25,
				userId: userInfo.userId,
				groupId: this.groupMessage.ugroupId,
				type: 5
			};
			// 打开连接
			this.$socketIo.connectSocketInit(data);
			// 接收数据
			uni.$on('getPositonsOrder', res => {
				this.connect = true;
				console.log(res, 'res');
				const { code, data } = res;
				if (code == 10018) {
				} else {
				}
			});
			// 错误时做些什么
			uni.$on('connectError', () => {
				this.connect = false;
				this.scoketError = true;
			});
		},
		/* 获取群成员 */
		async getGroupNuber(groupId) {
			try {
				let re = await this.$API.usertoGroupApi.findGroupUserList(groupId);
				this.numberList = re;
			} catch (e) {
				console.log(e, 'err');
			}
		},
		/*  解散群 */
		dissolveGroup() {
			this.getGroupHistory();
		},
		/* 下拉 */
		open() {
			// console.log(this,"this");
			this.mapheight = 60;
			console.log('open');
			this.show = true;
		},
		close() {
			this.show = false;
			this.mapheight = 91;
			console.log('close');
		},
		change(e) {
			console.log('change', e);
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #000000;
}
.rectangle {
	width: 376rpx;
	height: 88rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
}
::v-deep .u-subsection--button__bar {
	background-color: #9e61f6 !important;
}
</style>
